<template>
	<sysJk :label="'4.自动喷水灭火系统工作状态的判断'" showBack :withoutTop="true" :leftTime="600">
		<template v-slot:content>
			<view class="warp" id="warp" @touchmove.stop="()=>{}">
				<view class="taskTit" style="width:100%;text-align: left;font-size: 2.5vh;display: flex;align-items: center;justify-content: space-between;">
					<text>{{questionList[showQuestion-1]}}</text>  
					
					<template v-if="showQuestion==1">
						<image v-if="firstStep==1" :src="requireUrl+'/static/image/jd/j2-0.png'" mode="heightFix" style="height:100%"></image>
						<image v-else :src="requireUrl+'/static/image/jd/j2-2.png'" mode="heightFix" style="height:100%"></image>
					</template>
					<template v-if="showQuestion==4">
						<image v-if="secStep==1" :src="requireUrl+'/static/image/jd/j5-1.png'" mode="heightFix" style="height:100%"></image>
						<image v-else-if="secStep==2" :src="requireUrl+'/static/image/jd/j5-2.png'" mode="heightFix" style="height:100%"></image>
						<image v-else-if="secStep==3" :src="requireUrl+'/static/image/jd/j5-3.png'" mode="heightFix" style="height:100%"></image>
						<image v-else-if="secStep==4" :src="requireUrl+'/static/image/jd/j5-4.png'" mode="heightFix" style="height:100%"></image>
						<image v-else-if="secStep==5" :src="requireUrl+'/static/image/jd/j5-6.png'" mode="heightFix" style="height:100%"></image>
					</template>
					<template v-if="showQuestion==6">
						<image v-if="thirdStep==1" :src="requireUrl+'/static/image/jd/j1-1.png'" mode="heightFix" style="height:100%"></image>
						<image v-else-if="thirdStep==2" :src="requireUrl+'/static/image/jd/j1-2.png'" mode="heightFix" style="height:100%"></image>
						<image v-else-if="thirdStep==3" :src="requireUrl+'/static/image/jd/j1-3.png'" mode="heightFix" style="height:100%"></image>
						<image v-else-if="thirdStep==4" :src="requireUrl+'/static/image/jd/j1-4.png'" mode="heightFix" style="height:100%"></image>
					</template>
				</view>
				<view class="innerContent"style="position:relative;width:100%;height:100%">
					<image :src="bUrl" style="width:100%;height:100%;display: block">
					</image>
					<view class="myCard" id="myCard">
						<view class="cardContent">
							
							<view class="handleBtn">
								<!-- <u-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="lastTask">上一题</u-button> -->
								<u-button
								:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}" v-if="examType==1" @click="showFlag=true">查看解析</u-button>
								<!-- <u-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="nextTask">下一题</u-button> -->
							</view>
							<view class="btnArea">
								<u-button
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									v-if="(showQuestion==1)&&firstStep==1" @click="toNextTap">下一步</u-button>
								<u-button
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									v-if="(showQuestion==4)&&secStep<5" @click="nextTap4">下一步</u-button>
								<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										v-if="(showQuestion==6)&&thirdStep<4" @click="nextTap6">下一步</u-button>
										<!-- <u-button
												:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
											@click="handle" >提交</u-button> -->
								<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@click="handle" v-if="showQuestion==2||showQuestion==3||showQuestion==5||(showQuestion==1&&firstStep!=1)||(showQuestion==4&&secStep==5)||(showQuestion==6&&thirdStep==4)">提交</u-button>
							
								<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="redo">重做</u-button>
								<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="goBack">返回</u-button>
							</view>
							<template v-if="showQuestion==1">
								<view :class="result==1?'beSelect':''" class="waitSelect writeBox" data-flag="1"
									v-if="picShow==1"
									:style="{left:713*widthBl+'px',top:323*heightBl+'px',width:875*widthBl+'px',height:424*heightBl+'px'}"
									@tap="checkThis">
					
								</view>
								<view :class="result==2?'beSelect':''" class="waitSelect writeBox" data-flag="2"
									v-if="picShow==1"
									:style="{left:160*widthBl+'px',top:455*heightBl+'px',width:190*widthBl+'px',height:250*heightBl+'px'}"
									@tap="checkThis">
					
								</view>
								<view :class="result==3?'beSelect':''" class="waitSelect writeBox" data-flag="3"
									v-if="picShow==1"
									:style="{left:485*widthBl+'px',top:515*heightBl+'px',width:210*widthBl+'px',height:130*heightBl+'px'}"
									@tap="checkThis">
					
								</view>
								<view :class="result==4?'beSelect':''" class="waitSelect writeBox" data-flag="4"
									v-if="picShow==2"
									:style="{left:485*widthBl+'px',top:500*heightBl+'px',width:300*widthBl+'px',height:285*heightBl+'px'}"
									@tap="checkThis">
					
								</view>
								<view :class="result==5?'beSelect':''" class="waitSelect writeBox" data-flag="5"
									v-if="picShow==2"
									:style="{left:1330*widthBl+'px',top:400*heightBl+'px',width:240*widthBl+'px',height:400*heightBl+'px'}"
									@tap="checkThis">
					
								</view>
								<view class="answerBox" style="font-size:2.5vh">
									<view class="answerTit">
										{{firstStep==1?'请识别喷淋泵':'请识别电气控制柜'}}
									</view>
					
								</view>
								<view class="areaSelect">
									<view class="selectTit">
										场景导航
									</view>
									<view class="selectMain">
										<view class="singleSelect" :class="picShow==1?'areaBeSelect':''" @tap="changeBurl(1)" style="display:flex;font-size:3vh;align-items:center" :style="{height:100*heightBl+'px'}">
											<image :src="url1" mode="heightFix" style="height:100%"></image>
											<text style="margin-left:0.5vw">水泵房1</text> 
										</view>
										<view class="singleSelect" :class="picShow==2?'areaBeSelect':''" @tap="changeBurl(2)" style="display:flex;font-size:3vh;align-items:center" :style="{height:100*heightBl+'px'}">
											<image :src="url2" mode="heightFix" style="height:100%"></image>
											<text style="margin-left:0.5vw">水泵房2</text> 
										</view>
									</view>
								</view>
							</template>
							<template v-if="showQuestion==2">
					
								<view class="writeBox" v-if="picShow==3"
									:style="{left:720*widthBl+'px',top:650*heightBl+'px',width:50+'px',height:50+'px'}"
									@tap="to44">
									<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
								</view>
								
								<view class=" writeBox" v-if="picShow==3"
									:style="{left:1540*widthBl+'px',top:650*heightBl+'px',width:50+'px',height:50+'px'}"
									@tap="to45">
									<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
								</view>
								
								<view class=" writeBox" v-if="picShow==4||picShow==5"
									:style="{right:30+'px',top:50+'px',width:50+'px',height:50+'px'}" @tap="back43">
									<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class="answerBox" v-if="showQuestion==2" style="font-size: 2.5vh;">
									<view class="answerTit">
										请分别判断进水管和出水管的启闭状态
									</view>
									<view class="answerSelect">
										判断进水管阀门启闭状态
										<radio-group @change="onChange">
											<label class="uni-list-cell uni-list-cell-pd" v-for="item in items"
												:key="item.value" style="display: flex;margin-bottom: 5px;align-items:center">
												<view>
													<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+widthBl+')'}"/>
												</view>
												<view>{{item.name}}</view>
											</label>
										</radio-group>
									</view>
									<view class="answerSelect">
										判断出水管阀门启闭状态
										<radio-group @change="onChange2">
											<label class="uni-list-cell uni-list-cell-pd" v-for="item in items"
												:key="item.value" style="display: flex;margin-bottom: 5px;align-items:center">
												<view>
													<radio :value="item.value" :checked="result2==item.value" :style="{transform:'scale('+widthBl+')'}"/>
												</view>
												<view>{{item.name}}</view>
											</label>
										</radio-group>
									</view>
								</view>
					
							</template>
					
							<template v-if="showQuestion==3">
								<view class=" writeBox" v-if="picShow==6"
									:style="{right:30+'px',top:50+'px',width:50+'px',height:50+'px'}" @tap="back42">
									<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class="waitSelect writeBox" data-flag="2" v-if="picShow==2"
									:style="{left:1330*widthBl+'px',top:400*heightBl+'px',width:240*widthBl+'px',height:400*heightBl+'px'}"
									@tap="to46">
									<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class="answerBox" v-if="showQuestion==3" style="font-size:2.5vh">
									<view class="answerTit">
										请判断喷淋泵控制柜所处的工作状态
									</view>
									<view class="answerSelect">
										<radio-group @change="onChange">
											<label class="uni-list-cell uni-list-cell-pd" v-for="item in items2"
												:key="item.value" style="display: flex;margin-bottom: 5px;align-items:center">
												<view>
													<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+widthBl+')'}"/>
												</view>
												<view>{{item.name}}</view>
											</label>
										</radio-group>
									</view>
								</view>
					
							</template>
					
							<template v-if="showQuestion==4">
					
								<view :class="result==1?'beSelect':''" class="waitSelect writeBox" v-if="picShow==7"
									:style="{left:135*widthBl+'px',top:340*heightBl+'px',width:275*widthBl+'px',height:360*heightBl+'px'}"
									@tap="selectIt(1)">
					
								</view>
								<view :class="result==2?'beSelect':''" class="waitSelect writeBox" v-if="picShow==7"
									:style="{left:565*widthBl+'px',top:340*heightBl+'px',width:275*widthBl+'px',height:360*heightBl+'px'}"
									@tap="selectIt(2)">
					
								</view>
								<view :class="result==3?'beSelect':''" class="waitSelect writeBox" v-if="picShow==7"
									:style="{left:1000*widthBl+'px',top:340*heightBl+'px',width:275*widthBl+'px',height:360*heightBl+'px'}"
									@tap="selectIt(3)">
					
								</view>
								<view :class="result==4?'beSelect':''" class="waitSelect writeBox" v-if="picShow==7"
									:style="{left:1350*widthBl+'px',top:340*heightBl+'px',width:275*widthBl+'px',height:360*heightBl+'px'}"
									@tap="selectIt(4)">
					
								</view>
					
					
					
								<view :class="result==1?'beSelect':''" class="waitSelect writeBox" v-if="picShow==8"
									:style="{left:520*widthBl+'px',top:185*heightBl+'px',width:100*widthBl+'px',height:160*heightBl+'px'}"
									@tap="selectIt(1)">
					
								</view>
								<view :class="result==2?'beSelect':''" class="waitSelect writeBox" v-if="picShow==8"
									:style="{left:725*widthBl+'px',top:360*heightBl+'px',width:75*widthBl+'px',height:75*heightBl+'px'}"
									@tap="selectIt(2)">
					
								</view>
								<view :class="result==3?'beSelect':''" class="waitSelect writeBox" v-if="picShow==8"
									:style="{left:690*widthBl+'px',top:435*heightBl+'px',width:110*widthBl+'px',height:155*heightBl+'px'}"
									@tap="selectIt(3)">
					
								</view>
								<view :class="result==4?'beSelect':''" class="waitSelect writeBox" v-if="picShow==8"
									:style="{left:1150*widthBl+'px',top:260*heightBl+'px',width:100*widthBl+'px',height:165*heightBl+'px'}"
									@tap="selectIt(4)">
					
								</view>
								<view class="answerBox" v-if="showQuestion==4" style="font-size:2.5vh">
									<view class="answerTit" v-if="picShow==7">
										请识别湿式报警阀门
									</view>
									<view class="answerTit" v-else="picShow==8">
										<text v-if="secStep==2">请识别延时器</text>
										<text v-if="secStep==3">请识水力警铃</text>
										<text v-if="secStep==4">请识别压力开关</text>
										<text v-if="secStep==5">请识别压力表</text>
									</view>
									<!-- <view class="answerSelect">
										<radio-group @change="onChange">
											<label class="uni-list-cell uni-list-cell-pd" v-for="item in items2"
												:key="item.value" style="display: flex;margin-bottom: 5px;">
												<view>
													<radio :value="item.value" :checked="item.checked" />
												</view>
												<view>{{item.name}}</view>
											</label>
										</radio-group>
									</view> -->
								</view>
					
							</template>
					
							<template v-if="showQuestion==5">
					
								<view class="writeBox" v-if="picShow==9"
									:style="{left:570*widthBl+'px',top:630*heightBl+'px',width:'auto',height:'auto'}"
									@tap="to413">
									<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class=" writeBox" v-if="picShow==9"
									:style="{left:670*widthBl+'px',top:655*heightBl+'px',width:'auto',height:'auto'}"
									@tap="to414">
									<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class="writeBox" v-if="picShow==11||picShow==10"
									:style="{right:30+'px',top:50+'px',width:30+'px',height:30+'px'}" @tap="back412">
									<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class="answerBox" v-if="showQuestion==5" style="position:absolute;font-size:2.5vh">
									<view class="answerTit">
										请分别判断泄水阀、报警管路控制阀、供水管路控制阀的启闭状态
									</view>
									<view class="answerSelect" style="padding:0">
										判断泄水阀启闭状态
										<radio-group @change="onChange">
											<label class="uni-list-cell uni-list-cell-pd" v-for="item in items3"
												:key="item.value" style="display: flex;margin-bottom: 5px;align-items: center;">
												<view>
													<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+widthBl+')'}"/>
												</view>
												<view>{{item.name}}</view>
											</label>
										</radio-group>
									</view>
									<view class="answerSelect" style="padding:0">
										判断报警管路控制阀启闭状态
										<radio-group @change="onChange2">
											<label class="uni-list-cell uni-list-cell-pd" v-for="item in items3"
												:key="item.value" style="display: flex;margin-bottom: 5px;align-items: center">
												<view>
													<radio :value="item.value" :checked="result2==item.value" :style="{transform:'scale('+widthBl+')'}" />
												</view>
												<view>{{item.name}}</view>
											</label>
										</radio-group>
									</view>
									<view class="answerSelect" style="padding:0">
										判断供水管路控制阀启闭状态
										<radio-group @change="onChange3">
											<label class="uni-list-cell uni-list-cell-pd" v-for="item in items3"
												:key="item.value" style="display: flex;margin-bottom: 5px;align-items: center">
												<view>
													<radio :value="item.value" :checked="result3==item.value" :style="{transform:'scale('+widthBl+')'}"/>
												</view>
												<view>{{item.name}}</view>
											</label>
										</radio-group>
									</view>
								</view>
					
							</template>
					
							<template v-if="showQuestion==6">
					
								<view class="writeBox" v-if="picShow==12&&!waterOpen"
									:style="{left:435*widthBl+'px',top:725*heightBl+'px',width:30+'px',height:30+'px'}"
									@tap="to417">
									<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class="writeBox" v-if="picShow==12&&waterOpen"
									:style="{left:435*widthBl+'px',top:725*heightBl+'px',width:30+'px',height:30+'px'}"
									@tap="to4171">
									<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
								</view>
								
								<view class=" writeBox" v-if="picShow==12&&!waterOpen"
									:style="{left:400*widthBl+'px',top:650*heightBl+'px',width:30+'px',height:30+'px'}"
									@tap="to416">
									<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class=" writeBox" v-if="picShow==12&&waterOpen"
									:style="{left:400*widthBl+'px',top:650*heightBl+'px',width:30+'px',height:30+'px'}"
									@tap="to4161">
									<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class=" writeBox" v-if="picShow==13&&!waterOpen"
									:style="{left:760*widthBl+'px',top:505*heightBl+'px',width:30+'px',height:30+'px'}"
									@tap="to4171">
									<!-- <image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image> -->
								</view>
								<view class=" writeBox" v-if="picShow==16&&waterOpen"
									:style="{left:855*widthBl+'px',top:415*heightBl+'px',width:30+'px',height:30+'px'}"
									@tap="to417">
									<!-- <image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image> -->
								</view>
								<view class="writeBox" v-if="picShow==13||picShow==14||picShow==15||picShow==16"
									:style="{left:1190*widthBl+'px',top:130*heightBl+'px',width:30+'px',height:30+'px'}" @tap="back415">
									<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class=" writeBox" v-if="picShow==17"
									:style="{left:1345*widthBl+'px',top:415*heightBl+'px',width:210*widthBl+'px',height:385*heightBl+'px'}"
									@tap="to419">
									<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class=" writeBox" v-if="picShow==18||picShow==19||picShow==46||picShow==419"
									:style="{left:1475*widthBl+'px',top:45*heightBl+'px',width:100*widthBl+'px',height:100*heightBl+'px'}"
									@tap="back418">
									<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image>
								</view>
								<view class=" writeBox" v-if="picShow==18||picShow==19||picShow==419||picShow==46"
									:style="{left:1360*widthBl+'px',top:280*heightBl+'px',width:80*widthBl+'px',height:95*heightBl+'px'}"
									@tap="changeHand">
									<!-- <image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image> -->
								</view>
								<view class=" writeBox" v-if="picShow==19"
									:style="{left:1165*widthBl+'px',top:415*heightBl+'px',width:80*widthBl+'px',height:95*heightBl+'px'}"
									@tap="closeBon">
									<!-- <image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image> -->
								</view>
								<view class=" writeBox" v-if="picShow==46&&thirdStep==4"
									:style="{left:1165*widthBl+'px',top:280*heightBl+'px',width:80*widthBl+'px',height:95*heightBl+'px'}"
									@tap="openBon">
									<!-- <image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image> -->
								</view>
								<view class="writeBox redLightBox" v-if="(picShow==19||picShow==419||picShow==46)&&handFlag&&lightFlag"
									:style="{left:655*widthBl+'px',top:550*heightBl+'px',width:365*widthBl+'px',height:50*heightBl+'px',display:'flex',justifyContent:'space-between'}"
									>
									<image src="https://www.xfzsb.com/static/image/red1.png" mode="widthFix" :style="{width:50*widthBl+'px'}"></image>
									<image src="https://www.xfzsb.com/static/image/red1.png" mode="widthFix" :style="{width:50*widthBl+'px'}"></image>
									<!-- <image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image> -->
								</view>
								<view class="answerBox" v-if="showQuestion==6&&thirdStep==1" style="position: absolute;font-size:2.5vh">
									<view class="answerTit">
										请操作末端试水装置，测试自动灭火系统的压力数值
									</view>
									<view class="answerSelect" style="padding:0">
										请测试后，选择正确压力
										<radio-group @change="onChange">
											<label class="uni-list-cell uni-list-cell-pd" v-for="item in items4"
												:key="item.value" style="display: flex;margin-bottom: 5px;align-items: center;">
												<view>
													<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+widthBl+')'}"/>
												</view>
												<view>{{item.name}}</view>
											</label>
										</radio-group>
									</view>
									
								</view>
								<view class="answerBox" v-if="showQuestion==6&&thirdStep==2" style="position: absolute;font-size:2.5vh">
									<view class="answerTit">
										请停止消防水泵
									</view>
									
								</view>
								<view class="answerBox" v-if="showQuestion==6&&thirdStep==3" style="position: absolute;font-size:2.5vh">
									<view class="answerTit">
										请复位末端试水装置
									</view>
									
								</view>
								<view class="answerBox" v-if="showQuestion==6&&thirdStep==4" style="position: absolute;font-size:2.5vh">
									<view class="answerTit">
										请复位消防泵组电气控制柜
									</view>
									
								</view>
								<view class="areaSelect">
									<view class="selectTit">
										场景导航
									</view>
									<view class="selectMain">
										<view class="singleSelect" :class="picShow==12||picShow==13||picShow==15||picShow==16?'areaBeSelect':''" @tap="back415(1)" style="display:flex;font-size:3vh;align-items:center" :style="{height:100*heightBl+'px'}">
											<image :src="url3" mode="heightFix" style="height:100%"></image>
											<text style="margin-left:0.5v">末端试水场景</text> 
										</view>
										
										<view class="singleSelect" :class="picShow==17||picShow==18||picShow==19||picShow==419||picShow==46?'areaBeSelect':''" @tap="back418(2)" style="display:flex;font-size:3vh;align-items:center" :style="{height:100*heightBl+'px'}">
											
											<image :src="url4" mode="heightFix" style="height:100%"></image>
											<text style="margin-left:0.5v">水泵房(1)</text> 
										</view>
									</view>
								</view>
							</template>
					
					
					
						</view>
					</view>
					
					
				</view>
				
				<u-mask :show="showFlag" @click="onClickHide">
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block" style="width:400rpx;padding: 20rpx;box-sizing:border-box;background: #fff;font-size:2vh">
							<view class="overtitle">
								【试题解析】 正确答案
							</view>
							<view class="overtitle">
								{{analysList[showQuestion-1]}}
							</view>
							<view class="overtitle" v-if="showQuestion==2||showQuestion==3||showQuestion==5||(showQuestion==6&&thirdStep==1)">
								正确答案：
								<text v-if="showQuestion==2">
									{{q2Flag1?'不正常，正常':'正常，不正常'}}
								</text>
								<text v-else-if="showQuestion==3">
									自动状态
								</text>
								<text v-else-if="showQuestion==5">
									{{q5Flag1?'不正常,正常,不正常':'正常,不正常，正常'}}
								</text>
								<text v-else-if="showQuestion==6">
									0.5MPA
								</text>
							</view>
						</view>
					</view>
				</u-mask>
			</view>

		</template>
	</sysJk>

</template>

<script>
	import sysJk from '@/components/sysJk.vue'
	import {
		fzQuestion
	} from '@/globalApi/requestApi.js'
	const app = getApp();
	const baseUrl = app.globalData.requestUrl;
	export default {
		components: {
			sysJk
		},
		data() {


			return {
				widthBl: 0,
				heightBl: 0,
				writeBox: {width:0,height:0},
				writeBoxLeft: 0,
				writeBoxTop: 0,
				showFlag: false,
				waterOpen:false,
				handFlag:false,
				bUrl: baseUrl + "/static/image/jk/4-1.jpg",
				picShow: 1,
				showQuestion: 1,
				firstStep: 1,
				lightFlag:true,
				isCorrect:true,
				secStep: 1,
				examType:1,
				questionList: [
					'【1/6】识别喷淋泵和电气控制柜',
					'【2/6】判断进水管出水管阀门启闭状态',
					'【3/6】请判断喷淋泵控制柜所处的工作状态',
					'【4/6】请识别自动喷水灭火系统组件',
					'【5/6】判断泄水阀、报警管路控制阀、供水管路控制阀的启闭状态',
					'【6/6】请通过末端试水装置，测试自动灭火系统的压力数值，并复位',
				],
				result: null,
				result2:null,
				result3:null,
				items: [{
						name: '正常',
						value: '正常'
					},
					{
						name: '不正常',
						value: '不正常'
					}
				],
				items2: [{
						name: '自动状态',
						value: '自动状态'
					},
					{
						name: '手动状态',
						value: '手动状态'
					}
				],
				items3: [{
						name: '正常',
						value: '正常'
					},
					{
						name: '不正常',
						value: '不正常'
					}
				],
				items4:[
						{
							name: '0.0MPA',
							value: '0.0MPA'
						},
						{
							name: '0.3MPA',
							value: '0.3MPA'
						},
						{
							name: '0.5MPA',
							value: '0.5MPA'
						},
						{
							name: '0.6MPA',
							value: '0.6MPA'
						},
				],
				thirdStep:1,
				originLight:null,
				originHand:null,
				analysList:[
					'喷淋泵在场景1，控制柜在场景2',
					'该题为判断阀门开关状态，高进低出，阀门都是常开状态才是正常，这阀门为明杆闸阀，当杆突出手轮为开启状态，没有突出即为关闭状态',
					'观察指示灯，亮灯代表在该状态',
					'左边第一个，有延时器的为湿式系统。红色小圆柱体的为压力开关',
					'泄水阀常闭才是正常，报警管路控制阀和供水管路控制阀常开才是正常。',
					'开了末端之后要回去看看压力表读书再选择答案，停泵需要在手动控制状态才能操作，末端复位即关水，控制柜复位即转为自动控制状态'
				],
				url1:baseUrl + "/static/image/jk/4-1.jpg",
				url2:baseUrl + "/static/image/jk/4-2.jpg",
				url3:baseUrl + "/static/image/jk/4-15.jpg",
				url4:baseUrl + "/static/image/jk/4-18.jpg",
				requireUrl:baseUrl,
				allScore:0,
				q2Flag1:true,
				q5Flag1:true
			}
		},
		onLoad(option) {
			this.examType = option.examType
			// var writeBox = uni.createSelectorQuery().in(this).select('#warp')
			// writeBox.boundingClientRect(data => {
			// 	this.writeBox = data
			// }).exec()
		},
		onReady() {
			let that = this
			this.$nextTick(function(){
				that.drawWhiteBox()
			})
		},
		methods: {
			openBon(){
				this.picShow = 18
				this.bUrl =  baseUrl + "/static/image/jk/4-19.jpg"
				// this.handleFlag = false
				this.lightFlag = true
			},
			onChange(e){
				this.result = e.detail.value
			},
			onChange2(e){
				this.result2 = e.detail.value
			},
			onChange3(e){
				this.result3 = e.detail.value
			},
			redo(){
				if(this.showQuestion==1){
						this.bUrl= baseUrl + "/static/image/jk/4-1.jpg"
						this.picShow=1
						this.result = ''
				}else if(this.showQuestion==2){
					this.result=''
					this.result2=''
					this.q2Flag1 = Math.random()>=0.5
					if(this.q2Flag1){
						this.bUrl = baseUrl + "/static/image/jk/4-3.jpg"
						this.picShow = 3
					}else{
						this.bUrl = baseUrl + "/static/image/jk/4-3-1.jpg"
						this.picShow = 3
					}
				}else if(this.showQuestion==3){
					this.result=''
					this.bUrl = baseUrl + "/static/image/jk/4-12.jpg"
					this.picShow = 2
				}else if(this.showQuestion==4){
					if(this.secStep==1){
						this.result = ''
						this.bUrl = baseUrl + "/static/image/jk/4-7.jpg"
						this.picShow = 7
					}else {
						this.result = ''
					}
				}else if(this.showQuestion==5){
					this.result=''
					this.result2=''
					this.result3=''
					this.q5Flag1 = Math.random()>=0.5
					this.bUrl = baseUrl + "/static/image/jk/4-12.jpg"
					this.picShow = 9
				}else{
					if(this.thirdStep==1){
						this.waterOpen = false
						this.result = ''
						this.bUrl = baseUrl + "/static/image/jk/4-15.jpg"
						this.picShow = 12
					}else if(this.thirdStep==2){
						this.handFlag = false
						this.lightFlag = true
						this.bUrl = baseUrl + "/static/image/jk/4-18.jpg"
						this.picShow = 17
					}else if(this.thirdStep==3){
						this.waterOpen = this.originWater
						this.bUrl = baseUrl + "/static/image/jk/4-15.jpg"
						this.picShow = 12
					}else{
						this.lightFlag = this.originLight
						this.handFlag = this.originHand
						this.bUrl = baseUrl + "/static/image/jk/4-18.jpg"
						this.picShow = 17
					}
				}
			},
			closeBon(){
				this.lightFlag = false
			},
			changeHand(){
				this.handFlag = !this.handFlag
				if(this.handFlag){
					if(this.thirdStep==4){
						this.picShow = 46
						this.bUrl =  baseUrl + "/static/image/jk/4-6.jpg"
					}else{
						this.bUrl =  baseUrl + "/static/image/jk/10-2.jpg"
						this.picShow = 19
					}
					
				}else{
					if(this.thirdStep==2){
						this.picShow = 419
						this.bUrl =  baseUrl + "/static/image/jk/4-19.jpg"
					}else{
						if(this.lightFlag){
							this.picShow = 18
							this.bUrl =  baseUrl + "/static/image/jk/4-19.jpg"
						}else{
							
							this.picShow = 46
							this.bUrl =  baseUrl + "/static/image/jk/4-6.jpg"
						}
						
					}
					
				}
			},
			goBack(){
				uni.navigateBack()
			},
			back418(){
				this.picShow = 17
				this.bUrl =  baseUrl + "/static/image/jk/4-18.jpg"
			},
			to419(){
				if(!this.handFlag){
					if(this.thirdStep==2){
						this.picShow = 18
						this.bUrl =  baseUrl + "/static/image/jk/4-19.jpg"
					}else{
						
						this.picShow = 46
						this.bUrl =  baseUrl + "/static/image/jk/4-6.jpg"
					}
					
				}else{
					this.bUrl =  baseUrl + "/static/image/jk/10-2.jpg"
					this.picShow = 19
				}
				
			},
			nextTap6() {
				let that = this
				
				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',
					
				}).then(res=>{
					
							let score = 0
							let no = '4-4-'+that.secStep
							if(that.thirdStep==1){
								if(!that.result){
									
										uni.showToast({
											title:'请选择答案',
											icon:'none'
										})
										return
								}
								if(that.result=='0.5MPA'){
									that.isCorrect = true
								}else{
									that.isCorrect = false
								}
							}
							else if(that.thirdStep==2){
								if(that.isCorrect==true&&!that.lightFlag){
									that.isCorrect = true
								}else{
									that.isCorrect = false
								}
							}else if(that.thirdStep==3){
								if(that.isCorrect==true&&!that.waterOpen){
									that.isCorrect = true
								}else{
									that.isCorrect = false
								}
							}
							let handleData = {
								fz_id: that.examId,
								title: '自动喷水灭火系统电气控制柜操作',
								no: '4-6-'+that.thirdStep,
								question_type: 3,
								user_answer: that.result,
								answer: '',
								is_correct: '',
								score: score,
								start_time: '',
								end_time: '',
								question_answer: ''
							}
							fzQuestion().then(res => {
								if (res.code == 200) {
									if(that.thirdStep==1){
										that.bUrl = baseUrl + "/static/image/jk/4-18.jpg"
										that.picShow = 17
										that.thirdStep += 1
									}
									else if(that.thirdStep==2){
										that.bUrl = baseUrl + "/static/image/jk/4-15.jpg"
										that.picShow = 12
										that.thirdStep += 1
										that.originWater = that.waterOpen
									}else if(that.thirdStep==3){
										that.bUrl = baseUrl + "/static/image/jk/4-18.jpg"
										that.picShow = 17
										that.originHand = that.handFlag
										that.originLight = that.lightFlag
										that.thirdStep += 1
									}
										// that.bUrl = baseUrl + "/static/image/jk/4-8.jpg"
										that.result == ''
									
								}
								// that.showQuestion+=1
								
								// }
							})
						
				});
			},
			
			to4171(){
				
				this.bUrl = baseUrl + "/static/image/jk/4-17-1.jpg"
				this.picShow = 16
				this.waterOpen = true
			},
			to4161(){
				
				this.bUrl = baseUrl + "/static/image/jk/4-16-1.jpg"
				this.picShow = 15
				this.waterOpen = true
			},
			to416(){
				if(this.waterOpen){
					this.bUrl = baseUrl + "/static/image/jk/4-16-1.jpg"
					this.picShow = 16
				}else{
					this.bUrl = baseUrl + "/static/image/jk/4-16.jpg"
					this.picShow = 13
				}
				
			},
			back415(){
				this.bUrl = baseUrl + "/static/image/jk/4-15.jpg"
				this.picShow = 12
			},
			to417(){
				
				this.bUrl = baseUrl + "/static/image/jk/4-17.jpg"
				this.picShow = 13
				this.waterOpen=false
			},
			back412() {
				this.bUrl = baseUrl + "/static/image/jk/4-12.jpg"
				this.picShow = 9
			},
			to414() {
				if(this.q5Flag1){
					this.bUrl = baseUrl + "/static/image/jk/4-14.jpg"
				}else{
					this.bUrl = baseUrl + "/static/image/jk/4-14-2.jpg"
				}
				this.picShow = 11
				
			},
			to413() {
				if(this.q5Flag1){
					this.bUrl = baseUrl + "/static/image/jk/4-13.jpg"
				}else{
					this.bUrl = baseUrl + "/static/image/jk/4-13-2.jpg"
				}
				this.picShow = 10
			},
			selectIt(data) {
				this.result = data
			},
			back42() {
				this.bUrl = baseUrl + "/static/image/jk/4-12.jpg"
				this.picShow = 2
			},
			to46() {
				this.bUrl = baseUrl + "/static/image/jk/4-6.jpg"
				this.picShow = 6
			},
			back43() {
				if(this.q2Flag1){
					this.bUrl = baseUrl + "/static/image/jk/4-3.jpg"
					this.picShow = 3
				}else{
					this.bUrl = baseUrl + "/static/image/jk/4-3-1.jpg"
					this.picShow = 3
				}
			},
			to45() {
				if(this.q2Flag1){
					this.bUrl = baseUrl + "/static/image/jk/4-5.jpg"
					this.picShow = 5
				}else{
					this.bUrl = baseUrl + "/static/image/jk/4-5-1.jpg"
					this.picShow = 5
				}
				
			},
			to44() {
				if(this.q2Flag1){
					this.bUrl = baseUrl + "/static/image/jk/4-4.jpg"
					this.picShow = 4
				}else{
					this.bUrl = baseUrl + "/static/image/jk/4-4-1.jpg"
					this.picShow = 4
				}
				
			},
			handle() {
				let that = this
				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',
					
				}).then(res=>{
					
							let score = 0
							
							let handleData ={
								fz_id: that.examId,
								title: '消防联动控制器直接手动控制单元操作',
								no: '4-'+that.showQuestion,
								question_type: 1,
								user_answer: that.result,
								answer: '',
								is_correct: that.isCorrect,
								score: score,
								start_time: '',
								end_time: '',
								question_answer: ''
							}
							if(that.showQuestion==1){
								if(that.isCorrect){
									if(that.result==5){
										handleData.score = 0.5
										handleData.is_correct = true
									}else{
										handleData.is_correct = false
										handleData.score = 0
									}
								}else{
									handleData.score = 0
								}
								handleData.title = '识别喷淋泵和电气控制柜'
							}else if(that.showQuestion==2){
								handleData.title = '判断进水管出水管阀门启闭状态'
								if(!that.result||!that.result2){
									uni.showToast({
										title:'请选择答案',
										icon:'none'
									})
									return
								}
								if((that.q2Flag1&&that.result=='不正常'&&that.result2=='正常')||!that.q2Flag1&&that.result=='正常'&&that.result2=='不正常'){
									handleData.is_correct = true
									handleData.score = 0.5
								}else{
									handleData.is_correct = false
									handleData.score = 0
								}
								
							}else if(that.showQuestion==3){
								handleData.title = '请判断喷淋泵控制柜所处的工作状态'
								if(!that.result){
									uni.showToast({
										title:'请选择答案',
										icon:'none'
									})
									return
								}
								if(that.result=='自动状态'){
									handleData.score = 0.5
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
							}else if(that.showQuestion==4){
								handleData.title = '请识别自动喷水灭火系统组件'
								if(that.isCorrect&&that.result==4){
									handleData.score = 1.5
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
							}
							else if(that.showQuestion==5){
								handleData.title = '判断泄水阀、报警管路控制阀、供水管路控制阀的启闭状态'
								if(!that.result||!that.result2||!that.result3){
									uni.showToast({
										title:'请选择答案',
										icon:'none'
									})
									return
								}
								if((that.q5Flag1&&that.result=='不正常'&&that.result2=="正常"&&that.result3=="不正常")||(!that.q5Flag1&&that.result=='正常'&&that.result2=="不正常"&&that.result3=="正常")){
									handleData.score = 0.5
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
							}
							else if(that.showQuestion==6){
								handleData.title = '请通过末端试水装置，测试自动灭火系统的压力数值，并复位'
								if(that.isCorrect&&!that.handFlag){
									handleData.score = 0.5
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
							}
							fzQuestion(handleData).then(res => {
								if (res.code == 200) {
									that.result = ''
									that.result2 = ''
									that.result3 = ''
									that.isCorrect = true
									that.allScore= that.allScore+Number(handleData.score)
									
									if (that.showQuestion < 6) {
										that.showQuestion += 1
										if (that.showQuestion == 2) {
											that.q2Flag1 = Math.random()>=0.5
											if(that.q2Flag1){
												that.bUrl = baseUrl + "/static/image/jk/4-3.jpg"
												that.picShow = 3
											}else{
												that.bUrl = baseUrl + "/static/image/jk/4-3-1.jpg"
												that.picShow = 3
											}
											
										}
										if (that.showQuestion == 3) {
											that.bUrl = baseUrl + "/static/image/jk/4-12.jpg"
											that.picShow = 2
										}
										if (that.showQuestion == 4) {
											that.bUrl = baseUrl + "/static/image/jk/4-7.jpg"
											that.picShow = 7
											that.secStep = 1
										}
										if (that.showQuestion == 5) {
											
											// that.firstStep = 1
											that.q5Flag1 = Math.random()>=0.5
											that.bUrl = baseUrl + "/static/image/jk/4-12.jpg"
											that.picShow = 9
											
										}
										if (that.showQuestion == 6) {
											that.bUrl = baseUrl + "/static/image/jk/4-15.jpg"
											that.picShow = 12
											that.thirdStep = 1
										}
									} else if (that.showQuestion == 6) {
										let pages = getCurrentPages()
										let prevPage = pages[pages.length -2] 
										prevPage.$vm.status4 = true
										prevPage.$vm.addScore(that.allScore)
										uni.navigateBack()
									}
								}
							})
						
				});
			},
			nextTap4() {
				let that = this
				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',
					
				}).then(res=>{
				
							let score = 0
							let no = '4-4-'+that.secStep
							if(that.isCorrect){
								if(that.secStep==1){
									if(that.result==1){
										that.isCorrect = true
									}else{
										that.isCorrect = false
									}
								}
								else if(that.secStep==2){
									if(that.result==3){
										that.isCorrect = true
									}else{
										that.isCorrect = false
									}
								}else if(that.secStep==3){
									if(that.result==1){
										that.isCorrect = true
									}else{
										that.isCorrect = false
									}
								}else if(that.secStep==4){
									if(that.result==2){
										that.isCorrect = true
									}else{
										that.isCorrect = false
									}
								}
							}else{
								that.isCorrect = false
							}
							
							let handleData = {
								fz_id: that.examId,
								title: '自动喷水灭火系统电气控制柜操作',
								no: no,
								question_type: 3,
								user_answer: that.result,
								answer: '',
								is_correct: '',
								score: score,
								start_time: '',
								end_time: '',
								question_answer: ''
							}
							fzQuestion(handleData).then(res => {
								if (res.code == 200) {
									// that.bUrl = baseUrl + "/static/image/jk/4-2.jpg"
									that.picShow = 8
									that.secStep += 1
									that.result = ''
									if (that.secStep == 2 || that.secStep == 3) {
										that.bUrl = baseUrl + "/static/image/jk/4-8.jpg"
										that.result == ''
									}
								}
								// that.showQuestion+=1
					
								// }
							})
						
				});
			},

			toNextTap() {
				let that = this
				this.$showModal2({
					title: '确认提交？',
					
				}).then(res=>{
				
							
							if(that.isCorrect){
								if(that.result!=2){
									that.isCorrect = false
								}else{
									that.isCorrect = true
								}
							}else{
								that.isCorrect = false
							}
							var handleData = {
								fz_id: that.examId,
								title: '自动喷水灭火系统电气控制柜操作',
								no: '4-1-1',
								question_type: 3,
								user_answer: that.result,
								answer: '',
								is_correct: that.isCorrect,
								score: '',
								start_time: '',
								end_time: '',
								question_answer: ''
							}
							fzQuestion(handleData).then(res => {
								if (res.code == 200) {
									// if (that.showQuestion == 1) {
										// that.bUrl = baseUrl + "/static/image/jk/4-2.jpg"
										// that.picShow = 2
										that.result = ''
										that.firstStep = 2
									// } 
									// that.showQuestion+=1
					
								}
							})
						
				});
			},
			checkThis(e) {
				this.result = e.currentTarget.dataset.flag
			},
			changeBurl(num) {
				if (num == 1) {
					this.bUrl = baseUrl + "/static/image/jk/4-1.jpg"
					this.picShow = 1
				} else {
					this.bUrl = baseUrl + "/static/image/jk/4-2.jpg"
					this.picShow = 2
				}
			},
			showDialog() {
				this.showFlag = true
			},
			onClickHide() {
				this.showFlag = false
			},
			drawWhiteBox() {
				let that = this
				var warp = uni.createSelectorQuery().in(this).select('#myCard')
				warp.boundingClientRect(data => {
					var widthBl = data.width / 1920
					var heightBl = data.height / 921
					this.widthBl = widthBl
					this.heightBl = heightBl
					this.writeBox.width = 100 * widthBl + 'px'
					this.writeBoxLeft = 650 * widthBl + 'px'
					this.writeBoxTop = 420 * heightBl + 'px'
					this.writeBox.height = 100 * heightBl + 'px'
				}).exec()

				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		

				// 	}
				// });
			},
			nextTask() {
				uni.navigateTo({
					url: '../jkE/jkE'
				})
			},
			lastTask() {
				uni.navigateBack()
			}
		}
	}
</script>


<style scoped lang="scss">
	.warp {
		height: 100%;
		box-sizing: border-box;
		// padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;

		.myCard {
			width: 100%;
			height:100%;
			position: absolute;
			left:0;
			top:0;
			// border-radius: 20rpx;
			// overflow: hidden;
			// z-index: 1;

			.cardContent {
				// padding: 52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				position: relative;
				// z-index: 2;
				color: #fff;

				.moneyContent {
					margin-top: 54rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.moneyDetail {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.detailTit {
							font-size: 24rpx;
							font-weight: 400;
						}

						.detailVal {
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}

				}

				.taskTit {
					width: 100%;
					text-align: left;
					background: #fff;
					color: #000
				}

				.handleBtn {
					position: fixed;
					left: 30px;
					bottom: 0px
				}

				.btnArea {
					margin-top: 160rpx;
					//margin-left: 150rpx;
					display: flex;
					justify-content: center;
					position: fixed;
					right: 30px;
					bottom: 00px // text-align: center;
				}
			}
		}

		.infoBox {
			width: 100%;
			padding: 14rpx 30rpx;
			margin-top: 33rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			.singleInfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				.info {
					flex: 1;

					.desc {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}

					.time {
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
					}
				}

				.val {
					width: 115rpx;
					height: 40rpx;
					border: 1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}

		.writeBox {
			// border: 1px solid green;
			width: 100px;
			height: 100px;
			position: absolute;
			display: flex;
			align-items: center;
		}

		.answerBox {
			position: absolute;
			left:30px;
			top: 0%;
			background: #fff;
			color: #000;
			width: 20%;
			font-size: 2vh;
			.answerTit {
				background: orange;
				padding: 5px;
				box-sizing: border-box;
			}
		}

		.answerSelect {
			padding: 10px 0;
			box-sizing: border-box;
		}

		.areaSelect {
			position: absolute;
			right: 0;
			color: #000;

			.selectTit {
				background: orange;
				padding: 5px;
				box-sizing: border-box;
				text-align: center;
			}

			.selectMain {
				background: #fff;

				.singleSelect {
					padding: 5px;
					box-sizing: border-box;
					text-align: center;
				}
			}
		}

		.beSelect {
			background: rgba(68, 133, 234, 0.5)
		}
		.areaBeSelect{
			border:1px solid red
		}
	}
</style>